<template>
  <div class="stuff">
    <div class="raw-wrap flex">
      <div class="raw-item" v-for="(item, index) in value" :key="index">
        <el-input
          placeholder="请输入名称"
          style="width: 200px; margin-right: 10px"
          v-model="item.name"
        ></el-input>
        <el-input
          placeholder="请输入分量"
          style="width: 100px; margin-right: 10px"
          v-model="item.specs"
        ></el-input>
        <i class="el-icon-error" @click="remove(index)"></i>
      </div>
     
    </div>

    <el-button type="primary" size="medium" icon="el-icon-plus" @click="add"
      >增加一项</el-button
    >
  </div>
</template>

<script>
// v-model 绑定的数据，在组件中双向绑定的value，发布事件是input
export default {
  name: "Stuff",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    // 删除一项
    remove(i) {
      // 删除数组中的数据，不能直接改props里边的数据
      // filter 过滤
      let newArray = this.value.filter((item, index) => {
        // 条件
        return i !== index;
      });
      // 将删除后的数组传递给父级（发布出去）
      this.$emit("input", newArray);
    },
    // 增加一项
    add() {
      this.$emit("input", [...this.value, { name: "", specs: "" }]);
    },
  },
};
</script>

<style lang="stylus" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
}

.raw-item {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>